import React ,{useState} from 'react'
import './index.scss'
import {  Image ,Search,Grid ,Rate  } from 'react-vant'
import { ShopO } from '@react-vant/icons'
import { useNavigate } from 'react-router-dom'





export default function Homes() {
  const [srcUrl,setSrcUrl]=useState('https://img1.baidu.com/it/u=2859542338,3761174075&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500')
  const [value, setValue] = useState('');
  const [valueScore, setValueScore] = useState(4);
  const navigate=useNavigate()
  const gotoSearch=()=>{
    navigate('/app/search')
  }

  return (
    <div className='contianer-box'>
      <div className="header-wrapper">
        <div className="header-content-wrapper">
          <h1>Koto小课堂</h1>
          <p>欢迎回来，你今天想学习什么？</p>
        </div>
        <div className="header-image-wrapper">
          <Image round fit='fill' width='100%' height='4rem' src={srcUrl} />
        </div>
        <Search className='header-search-wrapper' value={value}  onChange={setValue} onFocus={gotoSearch} placeholder="请输入搜索关键词" />
        <div className="header-photo-wrapper">
          <img src="../../../public/image/1.png" alt="" />
        </div>
      </div>
      <div className="main-wrapper">
        <div className="main-grid-wrapper">
          <Grid border={false}>
            {Array.from({ length: 8 }, (_, i) => (
              <Grid.Item key={i} icon={<ShopO />} text='文字' />
            ))}
          </Grid>
        </div>
        <div className="main-host-wrapper">
          <div className='header-title'>热门类别</div>
          <div className="header-most">查看更多</div>
        </div>
        <div className="main-host-content-wrapper">
          <div className="image-container">
            <img src="https://img0.baidu.com/it/u=3849170902,2912072114&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="Image 1"/>
            <div className="text-overlay">空间设计</div>
          </div>
          <div className="image-container">
            <img src="https://img1.baidu.com/it/u=813615213,625474096&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625" alt="Image 2"/>
            <div className="text-overlay">绘画素描</div>
          </div>
        </div>
        <div className="main-host-wrapper">
          <div className='header-title'>热门课程</div>
          <div className="header-most">查看更多</div>
        </div>
        <div className="main-host-content-wrapper">
          <div className="image-container">
            <img className='host-image' src="https://img0.baidu.com/it/u=3849170902,2912072114&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="Image 1"/>
            <div className="text-overlays">热门</div>
            <div className="host-teacher-wrapper">
              <div className='host-teacher-title-wrapper'>
                基础入门-数据库实战教程
              </div>
              <div className="teacher-wrapper">
                在线课堂-张老师
              </div>
              <div className="teacher-score">
                4.0<Rate value={valueScore} onChange={setValueScore} disabled disabledColor=' #FFD700' />
                (410)
              </div>
            </div>
          </div>
          <div className="image-container">
            <img className='host-image' src="https://img1.baidu.com/it/u=813615213,625474096&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625" alt="Image 2"/>
            <div className="text-overlays">最新</div>
            <div className="host-teacher-wrapper">
              <div className='host-teacher-title-wrapper'>
                基础入门-数据库实战教程
              </div>
              <div className="teacher-wrapper">
                在线课堂-Koto
              </div>
              <div className="teacher-score">
                4.0<Rate value={valueScore} onChange={setValueScore} disabled disabledColor=' #FFD700' />
                (39)
              </div>
            </div>
          </div>
        </div>
        <div className="main-host-wrapper">
          <div className='header-title'>热门老师</div>
          <div className="header-most">查看更多</div>
        </div>
        <div className="main-tearcher-wrapper">
          <img className='tearch-image-wrapper' src="/public/image/2.png" alt="" />
        </div>
        <div className="main-host-wrapper">
          <div className='header-title'>别人都在学</div>
          <div className="header-most">查看更多</div>
        </div>
        <div className="main-host-content-wrapper">
          <div className="image-container">
            <img className='host-image' src="https://img0.baidu.com/it/u=3849170902,2912072114&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="Image 1"/>
            <div className="text-overlays">热门</div>
            <div className="host-teacher-wrapper">
              <div className='host-teacher-title-wrapper'>
                基础入门-数据库实战教程
              </div>
              <div className="teacher-wrapper">
                在线课堂-张老师
              </div>
              <div className="teacher-score">
                4.0<Rate value={valueScore} onChange={setValueScore} disabled disabledColor=' #FFD700' />
                (410)
              </div>
            </div>
          </div>
          <div className="image-container">
            <img className='host-image' src="https://img1.baidu.com/it/u=813615213,625474096&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625" alt="Image 2"/>
            <div className="text-overlays">最新</div>
            <div className="host-teacher-wrapper">
              <div className='host-teacher-title-wrapper'>
                基础入门-数据库实战教程
              </div>
              <div className="teacher-wrapper">
                在线课堂-Koto
              </div>
              <div className="teacher-score">
                4.0<Rate value={valueScore} onChange={setValueScore} disabled disabledColor=' #FFD700' />
                (39)
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
